<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/swiper-bundle.css">
    <link rel="stylesheet" href="./font/蓝铅笔/iconfont.css">
    <link rel="stylesheet" href="./font/play/iconfont.css">
    <link rel="stylesheet" href="font/响应式底部/iconfont.css">
    <link rel="stylesheet" href="./font/蓝铅笔网校-移动端font/iconfont.css">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔头部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔尾部-移动端.css">
    <link rel="stylesheet" href="./CSS/蓝铅笔大触-移动端.css">
</head>
<body>
    <div class="header-box">
        <div class="header1">
            <div class="header-heart">
                <div class="logo">
                   <a href="#"><img src="./蓝铅笔漫步images/logo.png" alt=""></a> 
                </div>
                <div class="search">
                   <a href="#"><i class="iconfont icon-sousuo"></i></a> 
                </div>
                <div class="login">
                  <div class="login-box">
                    <div class="login-img">
                        <img src="./蓝铅笔漫步images/1.png" alt="">
                    </div>
                    <div class="login-font">
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="adv-box">
        <div class="adv">
            <a href="#"><img src="./蓝铅笔漫步images/164.png" alt=""></a>
        </div>
    </div>
    <div class="nav-live">
        <ul class="nav-live-ul">
            <li class="nav-live-ul-li">
                <a href="#">
                    大触直播
                </a>
            </li>
            <li class="nav-live-ul-li">
                <a href="#">
                    大触专访
                </a>
            </li>
            <li class="nav-live-ul-li">
                <a href="#">
                    大触周边
                </a>
            </li>
        </ul>
    </div>
    <div class="live">
        <div class="live-heart">
            <div class="live-heart-title">
             <p></p>
            <h2>即将直播</h2>
            <p><img src="./蓝铅笔漫步images/174.png" alt=""></p>
           </div>
           <div class="live-content">
              <ul class="live-content-ul">
                <li class="live-content-ul-li">
                   <div class="live-video">
                  <video src="./蓝铅笔漫步images/ty.mp4" autoplay muted controls></video>
                 <span>第474期</span>
              </div>
              <h3><a href="#">想要画面不脏乱？Get水彩运用的奇妙手法</a></h3>
              <div class="live-author">
                <a href="#">
                    <img src="./蓝铅笔漫步images/42.jpg" alt="">
                    <span>moonYen-</span>
                </a>
              </div>
              <div class="live-time">
                <span>时间：2022-09-22 19:30</span>
              </div>
              <div class="live-like">
                <span>2028人感兴趣</span>
                <a href="#">立即报名</a>
              </div>
                </li>
                <li class="live-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/135.png" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="live-content-ul-li  span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/140.png" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
               </ul>
           </div>
        </div>
    </div>
    <div class="before">
        <div class="before-heart">
            <div class="live-heart-title">
                <p></p>
               <h2>即将直播</h2>
              </div>
        </div>
        <div class="before-content">
            <ul class="before-content-ul">
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/95.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/20.png" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/96.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/97.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/98.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/99.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/100.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
                <li class="before-content-ul-li span2">
                    <div class="live-left">
                        <img src="./蓝铅笔漫步images/101.jpg" alt="">
                        <span>第475期</span>
                    </div>
                    <div class="live-right">
                        <h3>插画构成中的“色彩”与“点·线·面”组合</h3>
                        <div class="live-right-author">
                            <a href="#">
                                <img src="./蓝铅笔漫步images/42.jpg" alt="">
                                <span>Itoucon</span>
                            </a>
                        </div>
                        <div class="live-right-time">
                            <span>时间：2022-09-29 19:30</span>
                        </div>
                        <div class="live-right-like">
                            <span>2335人感兴趣</span>
                            <a href="#">预约直播</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="small-mask-box">
        <div class="small-mask">
           <div class="small-mask-heart">
               <ul class="small-mask-heart-ul">
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔首页-移动端.html">
                           <p><i class="iconfont icon-shouye-shouye"></i></p>
                           <p><span>首页</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-教程.html">
                           <p><i class="iconfont icon-diannao"></i></p>
                           <p><span>教程</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔网校-移动端.html">
                           <p><i class="iconfont icon-wenzhang"></i></p>
                           <p><span>网校</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔大触-移动端.html">
                           <p><i class="iconfont icon-chengshijinglixianxing"></i></p>
                           <p><span>大触</span></p>
                       </a>
                   </li>
                   <li class="small-mask-heart-ul-li">
                       <a href="./蓝铅笔移动端-社区.html">
                           <p><i class="iconfont icon-taolun"></i></p>
                           <p><span>社区</span></p>
                       </a>
                   </li>
               </ul>
           </div>
        </div>
       </div>
</body>
</html>